import React, { Component } from 'react';
import ReactDom from 'react-dom';
import './todo.css'
import 'antd/dist/antd.css';
import { DatePicker } from 'antd';
import { Input } from 'antd';
import { List, Avatar } from 'antd';
import { Layout } from 'antd';
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Table, Tag, Space } from 'antd';
import {
  Form,
  Select,
  InputNumber,
  Switch,
  Radio,
  Slider,
  Upload,
  Rate,
  Checkbox,
  Row,
  Col,
} from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

let storage=localStorage


const Demo = () => {
  const [form] = Form.useForm();

  // const onGenderChange = (value) => {
  //   switch (value) {
  //     case 'male':
  //       form.setFieldsValue({
  //         note: 'Hi, man!',
  //       });
  //       return;

  //     case 'female':
  //       form.setFieldsValue({
  //         note: 'Hi, lady!',
  //       });
  //       return;

  //     case 'other':
  //       form.setFieldsValue({
  //         note: 'Hi there!',
  //       });
  //   }
  // };

  const onFinish = (values) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue( {key: '1',
    no: '1',
    xl: 32,
    img: 'New York No. 1 Lake Park',
    zname: 'kk',
    leave:'six',
    xk:'语文',
    fl:'一级',
    date:'2021.5.19 9:00',
    tname:'皇埔铁牛',
    boss:'李二蛋',
    stime:'2021.5.19 11:00',
    statu:'已通过',
    ly:"中教云",
    cz:['查看','编辑']}
);
  };
  const normFile = (e) => {
    console.log('Upload event:', e);
  
    if (Array.isArray(e)) {
      return e;
    }
  
    return e && e.fileList;
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <h2>1、学科学段</h2>
      <Form.Item
        name="note"
        label="学段"
        rules={[
          {
            required: false,
          },
        ]}
      >
        <Select
          placeholder="请选择学段"
       
          allowClear
        >
          <Option value="xq">学前</Option>
          <Option value="xx">小学</Option>
          <Option value="cz">初中</Option>
          <Option value="zz">中职</Option>
          <Option value="gz">高职</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="gender"
        label="学科"
        rules={[
          {
            required: false,
          },
        ]}
      >
        <Select
          placeholder="请选择学科"
          // onChange={onGenderChange}
          allowClear
        >
          <Option value="ts">通识</Option>
 
        </Select>
      </Form.Item>
      <h2>2、资源信息</h2>
      <Form.Item
        name="xl"
        label="系列"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input/>

      </Form.Item>
    
      <Form.Item
        name="zname"
        label="资源名称"
        rules={[
          {
            required: true,
          },
        ]}
      >
      <Input/>
      </Form.Item>

      <Form.Item 
      name="radio-group" 
      label="资源内容"
      rules={[
        {
          required: true,
        },
      ]}>
      <Radio.Group>
      <Radio value="a">
      <Form.Item name="local" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
      <Upload.Dragger name="files" action="/upload.do"> 
        <p>拖拽上传</p>
      </Upload.Dragger>
      </Form.Item>
      </Radio>
      <Radio value="b">
      <Form.Item
        name="lj"
        label="资源链接"
      >
      <Input/>
      </Form.Item>
      </Radio>
      </Radio.Group>
      </Form.Item>

      <Form.Item 
      name="img" 
      label="资源封面"
      rules={[
        {
          required: true,
        },
      ]}>
      <Radio.Group>
      <Radio value="a">
      <Form.Item name="img-1" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
      <Upload.Dragger name="files" action="/upload.do">
      <p>拖拽上传</p>
      </Upload.Dragger>
      </Form.Item>
      </Radio>
      <Radio value="b">
      <Form.Item
        name="img-2"
        label="资源链接"
      >
      <Input/>
      </Form.Item>      
      </Radio>
      </Radio.Group>
      </Form.Item>

      <Form.Item
        name="fl"
        label="资源分类"
        rules={[
          {
            required: true,
          },
        ]}
      >
      <Select
          placeholder="请选择资源分类"
          // onChange={onGenderChange}
          allowClear
        >
          <Option value="ts">视频</Option>
          <Option value="ts">音频</Option>
          <Option value="ts">文档</Option>
 
        </Select>
      </Form.Item>

      <Form.Item
        name="gs"
        label="资源格式"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          placeholder="请选择资源格式"
          // onChange={onGenderChange}
          allowClear
        >
          <Option value="ts">MP4</Option>
          <Option value="ts">MP3</Option>
          <Option value="ts">PPT</Option>
          <Option value="ts">PDF</Option>
          <Option value="ts">DOC</Option>
 
        </Select>
      </Form.Item>

      <Form.Item label="资源制作日期">
          <DatePicker />
        </Form.Item>

        <Form.Item
        name="JJ"
        label="资源简介"
        rules={[
          {
            required: false,
          },
        ]}
      >
        <Input/>

      </Form.Item>

      <Form.Item
        name="ly"
        label="来源"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input/>

      </Form.Item>

      <h2>3、专家信息</h2>

      <Form.Item
        name="tname"
        label="授课专家名称"
        rules={[
          {
            required:false,
          },
        ]}
      >
      <Input/>
      </Form.Item>
      <Form.Item
        name="zhmc"
        label="授课专家名称"
        rules={[
          {
            required: false,
          },
        ]}
      >
      <Input/>
      </Form.Item>
      <Form.Item
        name="gzdw"
        label="工作单位"
        rules={[
          {
            required: false,
          },
        ]}
      >
      <Input/>
      </Form.Item>

      <Form.Item name={['user', 'introduction']} label="Introduction">
        <Input.TextArea />
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) =>
          getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
      </Form.Item>
    </Form>
  );
};

const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    render: text => <a>{text}</a>,
  },
  {
    title: '系列',
    dataIndex: 'xl',
    key: 'xl',
  },
  {
    title: '封面图',
    dataIndex: 'img',
    key: 'img',
  },
  {
    title: '资源名称',
    key: 'zname',
    dataIndex: 'zname',
  },
  {
    title: '学段',
    key: 'leave',
    dataIndex: 'leave',
  },
  {
    title: '学科',
    dataIndex: 'xk',
    key: 'xk',
  },
  {
    title: '资源分类',
    dataIndex: 'fl',
    key: 'fl',
  },
  {
    title: '资源制作日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '授课专家名称',
    dataIndex: 'tname',
    key: 'tname',
  },  {
    title: '审核人',
    dataIndex: 'boss',
    key: 'boss',
  },  {
    title: '审核时间',
    dataIndex: 'stime',
    key: 'stime',
  },
  {
    title: '审核状态',
    dataIndex: 'statu',
    key: 'statu',
  },
  {
    title: '来源',
    dataIndex: 'ly',
    key: 'ly',
  },
  {
    title: '操作',
    dataIndex: 'cz',
    key: 'cz',
    render:cz=> <div><a>{cz[0]}</a> | <a>{cz[1]}</a></div>
  },
];

const data = [
  {
    key: '1',
    no: '1',
    xl: 32,
    img: 'New York No. 1 Lake Park',
    zname: 'kk',
    leave:'six',
    xk:'语文',
    fl:'一级',
    date:'2021.5.19 9:00',
    tname:'皇埔铁牛',
    boss:'李二蛋',
    stime:'2021.5.19 11:00',
    statu:'已通过',
    ly:"中教云",
    cz:['查看','编辑']

  },
]

class LocalizedModal extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };

  OkModal = () =>{
    let i =data.length
    data[i]=  {
      key: '1',
      no: '1',
      xl: 32,
      img: 'New York No. 1 Lake Park',
      zname: 'kk',
      leave:'six',
      xk:'语文',
      fl:'一级',
      date:'2021.5.19 9:00',
      tname:'皇埔铁牛',
      boss:'李二蛋',
      stime:'2021.5.19 11:00',
      statu:'已通过',
      ly:"中教云",
      cz:['查看','编辑']
  
    }
    console.log(data)
    this.setState({
      visible: false,
    });
  }

  render() {
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Modal
        </Button>
        <Modal
          footer={null}
          title="Modal"
          visible={this.state.visible}
          onOk={this.OkModal}
          onCancel={this.hideModal}
          okText="保存"
          cancelText="取消"
        >
       
          <Demo/>

        </Modal>
      </>
    );
  }
}

function confirm() {
  Modal.confirm({
    title: 'Confirm',
    icon: <ExclamationCircleOutlined />,
    content: 'Bla bla ...',
    okText: '确认',
    cancelText: '取消',
  });
}
// TodoList组件
class TodoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue : ''
    }
  }

  //ToDoList
  render() {
    return (
      <div className='div0'>
    <Layout> 
      <Header style={{backgroundColor:"black",color:"white"}}>国培管理后台</Header>
      <Content>
      <Space>
      <LocalizedModal />
      <Button onClick={confirm}>Confirm</Button>
      </Space>
      </Content>
      <Content>
      <Table columns={columns} dataSource={data} />
      </Content>
    </Layout>
      </div>
    );
  }
}

ReactDom.render(<TodoList />,document.getElementById("root"));
